import { List, Button, WhiteSpace, WingBlank } from 'antd-mobile';
import { Component } from 'react'
import Link from 'umi/link';
import router from 'umi/router';
import { mobileFilter } from '@/utils'
import { connect } from 'dva'
import { getTenantid, removeToken } from '@/utils/auth'
const { Item } = List
@connect(({ worker, loading }) => {
  return {
    worker,
  }
})
class WorkerDetails extends Component {
  constructor(props) {
    super(props)
    this.loginOut = this.loginOut.bind(this)
  }
  componentDidMount() {
    this.getWorkerInfo()
  }
  getWorkerInfo() {
    const { dispatch, location: {query} } = this.props
    dispatch({
      type: 'worker/getWorkerInfo',
      payload: {
        id: query.id
      }
    })
  }
  loginOut() {
    removeToken()
    router.push(`/${getTenantid()}`)
  }
  render() {
    const { worker: {workerInfo={}} } = this.props
    return (
      <div>
        <List>
          <Item extra={workerInfo.name}>姓名</Item>
          <Item extra={mobileFilter(workerInfo.phone)}>手机</Item>
          {/* <Item extra={WOOKER_STATE_DICT[workerInfo.state]}>在职状态</Item> */}
          <Item extra={<span>{workerInfo.wages}<span className="unit-custom">元</span></span>}>工资(天)</Item>
          <Link to={`/user/resetPassword`}>
            <Item arrow="horizontal">修改密码</Item>
          </Link>
        </List>
        <WhiteSpace />
        <List>
          <Item extra={<span>{workerInfo.totalWages}<span className="unit-custom">元</span></span> }>应发工资</Item>
          <Item extra={<span>{workerInfo.paidWages}<span className="unit-custom">元</span></span>}>支付工资</Item>
        </List>
        <WhiteSpace />
        <List>
          <Link to={`/worker/record?id=${workerInfo.id}`}>
            <Item arrow="horizontal">工时明细</Item>
          </Link>
          <Link to={`/worker/payList?id=${workerInfo.id}`}>
            <Item arrow="horizontal">支付明细</Item>
          </Link>
          <Link to={`/worker/dayStatistics?id=${workerInfo.id}`}>
            <Item arrow="horizontal">日统计明细</Item>
          </Link>
          <Link to={`/worker/monthStatistics?id=${workerInfo.id}`}>
            <Item arrow="horizontal">月统计明细</Item>
          </Link>
        </List>
        <WhiteSpace />
        <WingBlank>
          <Button type="warning" onClick={this.loginOut}>退出登录</Button>
        </WingBlank>
      </div>
    )
  }
}
export default WorkerDetails